import React from 'react'
//导入react-redux的钩子
import { useSelector, useDispatch } from 'react-redux'
//导入仓库中的动作方法
import { asynccheckonetodo, asyncdeleteonetodo } from '../../../store/modules/todos'
export default function TodoItem() {
    let dispatch = useDispatch();
    //获取仓库中的所有状态数据
    let todolists = useSelector(state => state);
    //声明事件函数
    let checktodo = (id, done) => {
        //通过dispatch方法进行动作的分发
        dispatch(asynccheckonetodo({ id, done }))
    }
    let deletetodo = id => {
        return () => {
            dispatch(asyncdeleteonetodo(id));
        }
    }
    return (
        <div>
            {
                todolists.map(item => {
                    return (
                        <li key={item.id}>
                            <label>
                                <input type="checkbox"
                                    checked={item.done}
                                    onChange={e => checktodo(item.id, e.target.checked)} />
                                <span className={item.done ? 'done' : ''}>{item.title}</span>
                            </label>
                            <button className="btn btn-danger" onClick={deletetodo(item.id)}>删除</button>
                        </li>
                    )
                })
            }
            {
                todolists.length === 0 && <li className='empty'>暂无任务列表</li>
            }
        </div>
    )
}
